<template>
  <div class="layout">
    <component :is="layout" />
  </div>
</template>
<script setup>
import { defineAsyncComponent, computed, watch, shallowRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import { cache } from "@/utils/cache";
import config from "@/config/index";
import { getTargetPath } from "@/utils/redirect";
// 读取环境配置
const AppConfig = window.AppConfig;

const router = useRouter();
const route = useRoute();

const layout_mode = config.layout_mode;
const layout_page = computed(() => {
  return defineAsyncComponent(() => import(`@/layouts/theme/${layout_mode}/Index.vue`));
});

const layout = shallowRef(layout_page);

if (!cache(AppConfig.BASE_API_TOKEN_NAME)) {
  // 未登录清空缓存
  cache(null);
  router.push(AppConfig.LOGIN_PATH);
}

// 根路由时要重定向到主页路由
const redirectHome = () => {
  if (route.path && route.path == "/") {
    router.push(getTargetPath());
  }
};
// 实时监听路由变化
watch(
  () => route.path,
  () => {
    // 重定向到主页路由
    redirectHome();
  },
  {
    deep: false,
  }
);

// 重定向到主页路由
redirectHome();
</script>
